<template>
    <div class="box">
        <!-- <div class="d-flex d-flex-between d-flex-items-center header">
            <img src="@/assets/image/logo-3.png" class="w-15p">
            <div>
                <el-button size="small" @click="jump('login')">注册</el-button>
                <el-button type="danger" size="small" @click="jump('login')">登录</el-button>
            </div>
        </div> -->
        <el-header />

        <div class="nav c-white d-flex f-16 c-p">
            <div class="w-8p d-flex-items-center d-flex-center">我要办</div>
            <div class="w-8p d-flex-items-center d-flex-center">我要查</div>
        </div>
        <img src="@/assets/image/banner-2.png" class="w-100p">
        <div class="center">
            <div class="center-content d-flex c-p">
                <div class="w-26p left-box b-r">
                    <div class="center-left-title">人才项目基金库</div>
                    <div class="d-flex-items-center b-b h-60">
                        <img src="@/assets/image/icon-left-1.png" class="w-25 h-25">
                        <div class="m-l-15">我要办</div>
                    </div>
                    <div class="h-60 b-b d-flex-items-center d-flex-between" :class="{ 'left-active': key == 0 }"
                        @click="key = 0">
                        <div class="m-l-40">人才基金项目库</div>
                        <img src="@/assets/image/left-right-1.png" class="w-15 h-15 m-r-25" v-if="key == 0">
                        <img src="@/assets/image/left-right-2.png" class="w-15 h-15 m-r-25" v-else>
                    </div>
                    <div class="d-flex-items-center b-b h-60">
                        <img src="@/assets/image/icon-left-2.png" class="w-25 h-25">
                        <div class="m-l-15">我要查</div>
                    </div>
                    <div class="h-60 b-b d-flex-items-center d-flex-between" :class="{ 'left-active': key == 1 }"
                        @click="key = 1">
                        <div class="m-l-40">服务指南</div>
                        <img src="@/assets/image/left-right-1.png" class="w-15 h-15 m-r-25" v-if="key == 1">
                        <img src="@/assets/image/left-right-2.png" class="w-15 h-15 m-r-25" v-else>
                    </div>
                    <div class="h-60 b-b d-flex-items-center d-flex-between" :class="{ 'left-active': key == 2 }"
                        @click="key2(2)">
                        <div class="m-l-40">相关政策</div>
                        <img src="@/assets/image/left-right-1.png" class="w-15 h-15 m-r-25" v-if="key == 2">
                        <img src="@/assets/image/left-right-2.png" class="w-15 h-15 m-r-25" v-else>
                    </div>
                    <div class="h-60 b-b d-flex-items-center d-flex-between" :class="{ 'left-active': key == 3 }"
                        @click="key2(3)">
                        <div class="m-l-40">参考咨询</div>
                        <img src="@/assets/image/left-right-1.png" class="w-15 h-15 m-r-25" v-if="key == 3">
                        <img src="@/assets/image/left-right-2.png" class="w-15 h-15 m-r-25" v-else>
                    </div>
                    <div class="h-60 b-b d-flex-items-center d-flex-between" :class="{ 'left-active': key == 4 }"
                        @click="key2(4)">
                        <div class="m-l-40">常见问题</div>
                        <img src="@/assets/image/left-right-1.png" class="w-15 h-15 m-r-25" v-if="key == 4">
                        <img src="@/assets/image/left-right-2.png" class="w-15 h-15 m-r-25" v-else>
                    </div>
                    <div class="h-60 b-b d-flex-items-center d-flex-between" :class="{ 'left-active': key == 5 }"
                        @click="key = 5">
                        <div class="m-l-40">帮助反馈</div>
                        <img src="@/assets/image/left-right-1.png" class="w-15 h-15 m-r-25" v-if="key == 5">
                        <img src="@/assets/image/left-right-2.png" class="w-15 h-15 m-r-25" v-else>
                    </div>
                </div>
                <div class="w-66p right-box">
                    <div v-if="key == 0">
                        <div class="font-weight-bold">基金项目库介绍</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <div>
                            {{ serviceInfor.desc }}
                        </div>
                        <div class="applybox">
                            <p class="w-20p h-50 lh-50 sq-btn align-center m-t-50 m-r-20" @click="toapply">个人申请</p>
                            <p class="w-20p h-50 lh-50 sq-btn align-center m-t-50" @click="toapplys">企业申请</p>
                            <!-- <p class="w-20p h-50 lh-50 sq-btn align-center m-t-50 m-r-20" @click="toapply(1)">个人申请</p>
                            <p class="w-20p h-50 lh-50 sq-btn align-center m-t-50" @click="toapply(2)">企业申请</p> -->
                        </div>
                    </div>
                    <div v-if="key == 1">
                        <div class="font-weight-bold c-AC141B">服务指南</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <div class="m-b-20">申请加入基金项目库流程</div>
                        <img src="@/assets/image/technological-process.png" class="w-100p">
                        <div class="font-weight-bold c-AC141B">联系方式</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <div class="contact d-flex d-flex-wrap">
                            <div class="d-flex-items-center w-50p m-b-30">
                                <img src="@/assets/image/icon-1-1.png" class="w-32 h-32">
                                <div class="m-l-10 f-14">基金项目库联系人：{{ serviceInfor.contact }}</div>
                            </div>
                            <div class="d-flex-items-center w-45p m-b-30">
                                <img src="@/assets/image/icon-1-2.png" class="w-32 h-32">
                                <div class="m-l-10 f-14">联系邮箱：{{ serviceInfor.contact_mail }}</div>
                            </div>
                            <div class="d-flex-items-center w-50p m-b-30">
                                <img src="@/assets/image/icon-1-3.png" class="w-32 h-32">
                                <div class="m-l-10 f-14">联系部门：{{ serviceInfor.contact_department }}</div>
                            </div>
                            <div class="d-flex-items-center w-50p m-b-30">
                                <img src="@/assets/image/icon-1-4.png" class="w-32 h-32">
                                <div class="m-l-10 f-14">联络地址：{{ serviceInfor.address }}</div>
                            </div>
                            <div class="d-flex-items-center w-50p m-b-30">
                                <img src="@/assets/image/icon-1-5.png" class="w-32 h-32">
                                <div class="m-l-10 f-14">联系电话：{{ serviceInfor.contact_tel }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="key == 2">
                        <div class="font-weight-bold c-AC141B">相关政策</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <div class="d-flex-items-center d-flex-between h-60 b-b" v-for="(item, index) in policy_list"
                            :key="index" @click="todetailsp(item.policy_id)">
                            <div>{{ item.title }}</div>
                            <div>{{ item.createtime }}</div>
                        </div>
                        <el-pagination hide-on-single-page @current-change="handleCurrentChange2"
                            :current-page="page_num" :page-size="10" layout="prev, pager, next"
                            :policy_count="policy_count" :background="isBackground" prev-text="上一页"
                            next-text="下一页"></el-pagination>
                    </div>
                    <div v-if="key == 3">
                        <div class="font-weight-bold c-AC141B">参考咨询</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <div class="d-flex-items-center d-flex-between h-60 b-b" v-for="(item, index) in article_list"
                            :key="index" @click="todetailsa(item.article_id)">
                            <div>{{ item.title }}</div>
                            <div>{{ item.createtime }}</div>
                        </div>
                        <el-pagination hide-on-single-page @current-change="handleCurrentChange3"
                            :current-page="page_num" :page-size="10" layout="prev, pager, next"
                            :article_count="article_count" :background="isBackground" prev-text="上一页"
                            next-text="下一页"></el-pagination>
                    </div>
                    <div v-if="key == 4">
                        <div class="font-weight-bold c-AC141B">常见问题</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <div class="d-flex-items-center d-flex-between h-60 b-b" v-for="(item, index) in question_list"
                            :key="index" @click="todetailsq(item.question_id)">
                            <div>{{ item.title }}</div>
                            <div>{{ item.createtime }}</div>
                        </div>
                        <el-pagination hide-on-single-page @current-change="handleCurrentChange4"
                            :current-page="page_num" :page-size="10" layout="prev, pager, next"
                            :question_count="question_count" :background="isBackground" prev-text="上一页"
                            next-text="下一页"></el-pagination>
                    </div>
                    <div v-if="key == 5">
                        <div class="font-weight-bold c-AC141B">帮助反馈</div>
                        <div class="w-100p h-2 bgc-AC141B m-t-20 m-b-20"></div>
                        <el-form :model="form" label-width="auto" size="small" label-position="left">
                            <el-form-item label="姓名">
                                <el-input v-model="form.name" placeholder="请输入姓名" />
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="form.mobile" placeholder="请输入联系电话" minlength="11" maxlength="11" />
                            </el-form-item>
                            <el-form-item label="反馈内容">
                                <el-input v-model="form.content" placeholder="请输入反馈内容" type="textarea" />
                            </el-form-item>
                            <el-button type="danger" class="w-100p" @click="onSubmit">确认反馈</el-button>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <el-footer />
    </div>
</template>

<script>
import elFooter from '@/components/elFooter.vue';
import elHeader from '@/components/elHeader.vue';
import { mapState } from 'vuex'

export default {
    data() {
        return {
            key: 0,
            page_num: 1,
            article_list: [],
            article_count: 0,
            question_list: [],
            question_count: 0,
            policy_list: [],
            policy_count: 0,
            isBackground: true, //设置为true
            serviceInfor: [], //服务指南
            form: {
                name: '',
                mobile: '',
                content: '',
            },
            userInfo: []
        }
    },
    created() {
        this.rcjjBaseData();

        this.userInfo = JSON.parse(localStorage.getItem('rcjj_userinfo'));

        if (this.getQuery('userInfo')) {
            console.log("ccccccccc");
            // console.log(JSON.parse(this.getQuery('userInfo')).token, '666666666666666666666-------------')
            console.log(this.getQuery('userInfo'), '666666666666666666666-------------')

            setTimeout(() => {
                this.$store.dispatch('user/login', {
                    ...JSON.parse(this.getQuery('userInfo'))
                })
            }, 1000)
			this.userInfo = this.userInfo?this.userInfo:JSON.parse(this.getQuery('userInfo'))
        }
    },
    methods: {
        getQuery(name) {
            // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
            let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
            let r = window.location.search.substr(1).match(reg)
            if (r != null) {
                // 对参数值进行解码
                return decodeURIComponent(r[2])
            }
            return null
        },
        async rcjjBaseData() {
            let res = await this.$service.get({
                url: "/api/rcjj/v1/rcjj_base_data",
            });
            if (res.code == 1) {
                this.serviceInfor = res.info
                console.log(this.serviceInfor)
            } else {
                this.$message.error(res.msg);
            }
        },
        toapply() {
            if (!this.userInfo) {
                this.$message.warning("请先登录！")
                return
            }
            this.$router.push('/apply')
        },
        toapplys() {
            if (!this.userInfo) {
                this.$message.warning("请先登录！")
                return
            }
            this.$router.push('/applyComp')
        },
        // 获取资讯信息列表
        async rcjjArticleData() {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.7)",
            });
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_article_data",
                data: {
                    page_num: this.page_num
                }
            });
            if (this.loading) {
                this.loading.close();
            }
            if (res.code == 1) {
                this.article_list = res.info.article_list
                this.article_count = res.info.article_count
            } else {
                this.$message.error(res.msg);
            }
        },
        // 获取问题列表
        async rcjjQuestionData() {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.7)",
            });
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_question_data",
                data: {
                    page_num: this.page_num
                }
            });
            if (this.loading) {
                this.loading.close();
            }
            if (res.code == 1) {
                this.question_list = res.info.question_list
                this.question_count = res.info.question_count
            } else {
                this.$message.error(res.msg);
            }
        },
        // 获取政策信息列表
        async rcjjPolicyData() {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.7)",
            });
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_policy_data",
                data: {
                    page_num: this.page_num
                }
            });
            if (this.loading) {
                this.loading.close();
            }
            if (res.code == 1) {
                this.policy_list = res.info.policy_list
                this.policy_count = res.info.policy_count
            } else {
                this.$message.error(res.msg);
            }
        },
        key2(key) {
            this.key = key
            if (this.key == 2) {
                this.rcjjPolicyData()
            }
            if (this.key == 3) {
                this.rcjjArticleData()
            }
            if (this.key == 4) {
                this.rcjjQuestionData()
            }
        },
        handleCurrentChange2(val) {
            this.page_num = val
            this.rcjjPolicyData()
            window.scrollTo(0, 0)
        },
        handleCurrentChange3(val) {
            this.page_num = val
            this.rcjjArticleData()
            window.scrollTo(0, 0)
        },
        handleCurrentChange4(val) {
            this.page_num = val
            this.rcjjQuestionData()
            window.scrollTo(0, 0)
        },
        todetailsq(question_id) {
            this.$router.push(`/detailsPage?question_id=${question_id}`)
        },
        todetailsp(policy_id) {
            this.$router.push(`/detailsPage?policy_id=${policy_id}`)
        },
        todetailsa(article_id) {
            this.$router.push(`/detailsPage?article_id=${article_id}`)
        },
        async onSubmit() {
            if (!this.form.name) {
                this.$message.error('请输入有效的手机号')
                return
            }
            if (!this.form.mobile) {
                this.$message.error('请输入有效的手机号')
                return
            }
            if (!/^\d{11}$/.test(this.form.mobile)) {
                this.$message.error('请输入有效的手机号')
                return
            }
            if (!this.form.content) {
                this.$message.error('请输入留言内容')
                return
            }
            this.loading = this.$loading({
                lock: true,
                text: "提交中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.7)",
            });
            let res = await this.$service.post({
                url: "/api/rcjj/v1/rcjj_submit_message",
                data: {
                    name: this.form.name,
                    mobile: this.form.mobile,
                    content: this.form.content,

                }
            });
            if (this.loading) {
                this.loading.close();
            }
            if (res.code == 1) {
                this.$message.success(res.msg)
            } else {
                this.$message.error(res.msg);
            }

        }
    },
    components: {
        elHeader,
        elFooter
    },
    computed: {
        ...mapState(['user'])
    }
}
</script>

<style>
body {
    background: #f6f6f6;
}
</style>
<style scoped>
.applybox {
    display: flex;
}

.box {
    height: 100vh;
    overflow-y: auto;
}

.header {
    height: 10%;
    padding: 0 8%;
    width: 84%;
}

.center {
    width: 75%;
    margin: 40px auto;
}

.banner {
    width: 100%;
    height: 100%;
}

.login-box {
    position: absolute;
    background: #fff;
    z-index: 9;
    right: 20%;
    top: 13%;
    width: 21%;
    padding: 2%;
    border-radius: 20px;
}

.c-0D5FCD {
    color: #0D5FCD;
}

.nav {
    padding: 0 12.5%;
    background: #AC141B;
    height: 5%;
}

.nav-active {
    background: #8B1117;
}

.center-content {
    background: #fff;
    border-radius: 10px;
    padding: 30px 0;
}

.center-left-title {
    background: #AC141B;
    width: 100%;
    margin: 0 0 5% 0;
    text-align: center;
    color: #fff;
    line-height: 60px;
}

.b-r {
    border-right: 1px solid #DAD8D8;
}

.b-b {
    border-bottom: 1px solid #DAD8D8;
}

.left-box {
    padding: 0 2%;
}

.right-box {
    padding: 0 2%;
}

.left-active {
    background: #F7E5E6 !important;
    border-left: 5px solid #AC141B !important;
    color: #AC141B !important;
    font-weight: bold;
}

.bgc-AC141B {
    background: #AC141B;
}

.sq-btn {
    background: #F7E5E6;
    border-radius: 4px;
    border: 1px solid #AC141B;
    color: #AC141B;
}

.c-AC141B {
    color: #AC141B;
}

.contact {
    background: linear-gradient(180deg, #FFF7F8 0%, #FFFFFF 100%);
    padding: 2%;
}

::v-deep .el-pagination {
    display: flex;
    justify-content: center;
    position: relative;
    top: 30px;
}

::v-deep .el-pagination.is-background .el-pager li {
    width: 40.37px;
    height: 32.43px !important;
    line-height: 32.43px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    color: #000000;
    border: 1px solid #ced9ee;
}

/* 激活后的样式 */
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #AC141B;
    text-align: center;
}

::v-deep .el-pagination button,
::v-deep .el-pagination span:not([class*='suffix']) {
    background-color: #fff;
    border: none;
    border: 1px solid #ced9ee;
    width: 61px;
    height: 32px;
}

/* 媒体查询，针对手机设备 */
@media (max-width: 768px) {
    * {
        font-size: 11px !important;
    }

    .w-8p {
        width: auto;
        margin-right: 15px;
    }

    .center-content {
        padding: 20px 0 0 0;
    }

    .center {
        width: 100%;
        margin: 20px auto;
    }

    .m-l-40 {
        margin-left: 5px;
    }

    .center-left-title {
        line-height: 35px;
    }

    .h-60 {
        height: 50px;
    }

    .h-25 {
        height: 20px;
    }

    .w-25 {
        width: 20px;
    }

    .m-r-25 {
        margin-right: 0;
    }

    .m-t-50 {
        margin-top: 20px;
    }

    .m-r-20 {
        margin-right: 20px;
    }

    .w-20p {
        width: auto;
        padding: 0 10px;
    }

    .lh-50 {
        line-height: 40px;
    }

    .h-50 {
        height: 40px;
    }

    .w-26p {
        width: 28%;
    }

    ::v-deep .el-form-item__label {
        font-size: 11px;
        line-height: 40px;
        padding: 0 12px 0 0;
    }

    .m-l-10 {
        word-break: break-all;
    }

    .h-15 {
        height: 10px;
    }

    .w-15 {
        width: 10px;
    }

    .h-32 {
        height: 23px;
    }

    .w-32 {
        width: 23px;
    }
}
</style>